<template>
  <!--这是一个评论组件-->
  <div id='tmpl'>
    <!--1.0实现品论组件的样式结构-->
    <div id="postcomment">
      <h3>提交评论</h3>
      <p class="p"></p>
      <textarea placeholder="请输入您要评论的内容..." v-model="postcontent"></textarea>
      <mt-button type="primary" size="large" @click="postcomment">发表</mt-button>
    </div>
    <span></span>
    <!--实现评论区的列表功能-->
    <div>
      <h3>评论列表</h3>
      <p class="p"></p>
      <div v-for="(item,index) in list" :key="index">
        <!-- //v-for="(item,index) in list" :key="index"-->
        <div class="title">
          <span>第{{index+1}}楼:</span>
          <span>用户：{{item.user_name}}</span>
          <span>发表时间：{{item.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
        </div>
        <ul class="mui-table-view">
          <li class="mui-table-view-cell" v-text='item.content'></li>
        </ul>
      </div>
    </div>
  
    <!--实现获取更多按钮-->
    <mt-button type="danger" size="large" plain @click="getmore">加载更多</mt-button>
  </div>
</template>
<script>
import common from '../../kits/common.js'
import { Toast } from 'mint-ui';
export default {
  props: ['id'],//接受父组件中传过来的id值
  data() {
    return {
      pageindex: 1,
      postcontent: '',
      list: []
    };
  },
  created() {
    this.getcontent(this.pageindex);
  },
  methods: {
    getmore() {
      this.pageindex++;
      this.getcontent(this.pageindex);

    },
    getcontent(pageindex) {

      pageindex = pageindex || 1;
      var url = common.apidomain + '/api/getcomments/' + this.id + '?pageindex=' + pageindex;
      this.$http.get(url).then(function (res) {
        var data = res.body;
        if (data.status != 0) {
          Toast(data.message);
          return;
        }
        this.list = this.list.concat(res.body.message);
      })

    },
    postcomment() {
      if (this.postcontent.trim().length <= 0) {
        Toast("用户输入不能为空");
        return;
      }
      //实现品论的提交
      var url = common.apidomain + '/api/postcomment/' + this.id;

      this.$http.post(url, { content: this.postcontent }, { emulateJSON: true }).then(function (res) {

        Toast(res.body.message);

        this.list = [
          {
            "user_name": "匿名用户",
            "add_time": new Date(),
            "content": this.postcontent
          },

        ].concat(this.list)



        this.postcontent = '';//实现当用户输入完成后自动清空
      })
    }
  },

}
</script>
<style lang="css" scoped>
#postcomment {
  padding: 5px;
}

.p {
  height: 1px;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}


/*2.0 评论列表的样式*/

#list {
  padding: 5px;
}

.title {
  padding: 5px;
  color: #6d6d72;
  font-size: 15px;
  background-color: rgba(0, 0, 0, 0.1);
}
</style>